﻿@model TWCRM.Models.Home.CustomerModel
@{
    Layout = "/Views/Shared/_SubLayout.cshtml";
    ViewBag.Title = "客戶";
}
<script>
    var isNew = true;
    $(document).ready(function () {
        isNew = $.url().param('id') == undefined;

        if (isNew)
            $('.metro_input_contain input:first').focus();

        $.fn.metro.onPrevClick = function () {
            window.history.go(-1);
        };

        adjustPartCaption();

        checkDataLoading();

        loadEMailTypes();
        loadPhoneTypes();
        loadAddressTypes();
    });
</script>
<script id="metroInputDropdownSelectTemplate" type="text/x-jquery-tmpl">
    <li>${Type}</li>
</script>
<script id="phoneInputContainTemplate" type="text/x-jquery-tmpl">
	<div class="metro_input_contain" data-type="${Type}" data-contain-item>
        <label for="${Type}" class="metro_input_caption metro_input_trigger_dropdown">
            <a class="metro_input_select_btn">${Type}<span class="metro_trigger_dropdown">▼</span></a>
        </label>
        <input name="${Type}" type="text" class="metro_input_textinput phone" />
        <input name="${Type}" class="hide phoneID" val="${ID}"/>
    </div>
</script>
<script id="emailInputContainTemplate" type="text/x-jquery-tmpl">
	<div class="metro_input_contain" data-type="${Type}" data-contain-item>
        <label for="${Type}" class="metro_input_caption metro_input_trigger_dropdown">
            <a class="metro_input_select_btn">${Type}<span class="metro_trigger_dropdown">▼</span></a>
        </label>
        <input name="${Type}" type="text" class="metro_input_textinput email one_line" onblur="emailblur();"/>
        <input name="${Type}" class="hide emailID" val="${ID}"/>
    </div>
</script>
<script id="addressInputContainTemplate" type="text/x-jquery-tmpl">
    <div class="metro_input_contain address" data-type="${Type}" data-contain-item>
            <label class="metro_input_caption metro_input_trigger_dropdown">
                <a class="metro_input_select_btn">${Type}<span class="metro_trigger_dropdown">▼</span></a>
            </label>
            <div class="metro_input_contain">
                <label class="metro_input_caption">
                    <label for="Zip-${Type}">
                        郵政編碼</label>
                    /
                    <label for="Province-${Type}">
                        省/市/自治區</label>
                </label>
                <input id="Zip-${Type}" name="Zip-${Type}" type="text" class="metro_input_textinput address_zip two_line" />
                <input id="Province-${Type}" name="Province-${Type}" type="text" class="metro_input_textinput address_province two_line" />
            </div>
            <div class="metro_input_contain">
                <label for="City-${Type}" class="metro_input_caption">
                    市/縣
                </label>
                <input id="City-${Type}" name="City-${Type}" type="text" class="metro_input_textinput address_city one_line" />
            </div>
            <div class="metro_input_contain">
                <label for="Streat-${Type}" class="metro_input_caption">
                    街道
                </label>
                <textarea id="Streat-${Type}" name="Streat-${Type}" class="metro_input_textarea address_streat one_line"></textarea>
            </div>
            <div class="metro_input_contain">
                <label for="Country-${Type}" class="metro_input_caption">
                    國家/地區
                </label>
                <input id="Country-${Type}" name="Country-${Type}" type="text" class="metro_input_textinput address_country one_line" />
            </div>
            <input name="${Type}" class="hide addressID" val="${ID}"/>
        </div>
</script>
<div id="CustomerEdit">
    @using (Html.BeginForm())
    {
        @Html.HiddenFor(m => m.ID)
        @Html.HiddenFor(m => m.IsNew)
        <div class="metro_toolbar">
            <div class="metro_input_contain">
                <a class="metro_input_btn" onclick="confirm()">儲存客戶</a>
            </div>
        </div>
        
        <div class="part_left">
            <div class="BaseInfo">
                <div class="metro_input_contain">
                    <label class="metro_input_caption">
                        <label for="FirstName">
                            姓氏</label>
                        /
                        <label for="LastName">
                            名字</label>
                    </label>
                    @Html.TextBoxFor(m => m.FirstName, new { @class = "metro_input_textinput two_line" })
                    @Html.TextBoxFor(m => m.LastName, new { @class = "metro_input_textinput two_line" })
                </div>
                <div class="metro_input_contain">
                    <label for="Company" class="metro_input_caption">
                        單位
                    </label>
                    @Html.TextBoxFor(m => m.Company, new { @class = "metro_input_textinput one_line" })
                </div>
                <div class="metro_input_contain">
                    <label class="metro_input_caption">
                        <label for="Department">
                            部門</label>
                        /
                        <label for="Position">
                            職務</label>
                    </label>
                    @Html.TextBoxFor(m => m.Department, new { @class = "metro_input_textinput two_line" })
                    @Html.TextBoxFor(m => m.Position, new { @class = "metro_input_textinput two_line" })
                </div>
            </div>
            <div class="part_caption">
                <p class="part_caption_text">
                    Internet</p>
                <p class="part_caption_line">
                </p>
            </div>
            <div class="EMail">
                <div class="metro_input_dropdownselect">
                    <ul>
                    </ul>
                </div>
                <div class="metro_input_hide_contains" style="display: none">
                </div>
                <div class="metro_input_show_contains">
                </div>
                @Html.HiddenFor(m => m.EMail, new { @class = "txt_email" })
            </div>
            <div class="part_caption">
                <p class="part_caption_text">
                    電話號碼</p>
                <p class="part_caption_line">
                </p>
            </div>
            <div class="Phone">
                <div class="metro_input_dropdownselect">
                    <ul>
                    </ul>
                </div>
                <div class="metro_input_hide_contains" style="display: none">
                </div>
                <div class="metro_input_show_contains">
                </div>
                @Html.HiddenFor(m => m.Phone, new { @class = "txt_phone" })
            </div>
            <div class="part_caption">
                <p class="part_caption_text">
                    地址</p>
                <p class="part_caption_line">
                </p>
            </div>
            <div class="Address">
                <div class="metro_input_dropdownselect">
                    <ul>
                    </ul>
                </div>
                <div class="metro_input_hide_contains" style="display: none">
                </div>
                <div class="metro_input_show_contains">
                </div>
                @Html.HiddenFor(m => m.Adress, new { @class = "txt_Adress" })
            </div>
        </div>
        
        <div class="part_right">
            <div class="part_caption">
                <p class="part_caption_text">
                    便箋</p>
                <p class="part_caption_line">
                </p>
            </div>
            <div class="Memo">
                <div class="metro_input_contain">
                    @Html.TextAreaFor(m => m.Memo, new { @class = "metro_input_textarea" })
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
    }
</div>
<script>
    var loadedEmail = true;
    var loadedPhone = true;
    var loadedAddress = true;
    var emailRight = true;
    function emailblur() {
        emailRight = true;
        $('.email').each(function () {
            var email = $(this).val().trim();
            if (email != '' && email.search(/^\w+((-\w+)|(\.\w+))*\@@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == -1) {
                showError("電子郵件格式不正確");
                emailRight = false;
                return;
            }
        });
    }

    function confirm() {
        if (!valEmpty($("#FirstName"))) {
            showError("姓氏是必要欄位不可留白");
            return;
        }

        if (!emailRight)
            return;

        var phone = '';
        $('.phone').each(function () {
            var temp = $(this).val();
            var type = $(this).attr('name');
            phone += type + "●" + temp + "◆";
        });
        $('.txt_phone').val(phone);

        var email = '';
        $('.email').each(function () {
            var temp = $(this).val();
            var type = $(this).attr('name');
            email += type + "●" + temp + "◆";
        });
        $('.txt_email').val(email);

        var address = '';
        $('.address').each(function () {
            var type = $(this).attr('data-type');
            var zip = $('.address_zip', this).val();
            var province = $('.address_province', this).val();
            var city = $('.address_city', this).val();
            var streat = $('.address_streat', this).val();
            var country = $('.address_country', this).val();
            address += type + "●" + zip + "●" + province + "●" + city + "●" + streat + "●" + country + "◆";
        });
        $('.txt_Adress').val(address);

        showLoading();
        $('form').submit();
    }

    function initDropdown($part) {
        var $current_trigger_dropdown;
        $('.metro_input_trigger_dropdown', $part).unbind('click').bind('click', function (e) {
            e.stopPropagation();
            $current_trigger_dropdown = $(this);
            $('.metro_input_dropdownselect', $part).css({ left: $current_trigger_dropdown.position().left });
            $('.metro_input_dropdownselect', $part).width($current_trigger_dropdown.width());
            $('.metro_input_dropdownselect', $part).show();
        });
        $('.metro_input_dropdownselect li', $part).hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        });
        $('.metro_input_dropdownselect li', $part).unbind('click').bind('click', function () {
            var selected_value = $(this).html();

            if ($('.metro_input_show_contains .metro_input_contain[data-type=' + selected_value + ']', $part).length > 0) {
            }
            else {
                $('.metro_input_contain[data-type=' + selected_value + ']', $part).insertBefore($current_trigger_dropdown.parent());
                $current_trigger_dropdown.parent().appendTo($('.metro_input_hide_contains', $part));
            }

            $('.metro_input_show_contains .metro_input_contain[data-type=' + selected_value + '] input:first', $part).focus();

            $('.metro_input_dropdownselect', $part).hide();

            adjustMetroInputContain();
        });
    }
    function showDropdownItem(itemValue, target) {
        $('.metro_input_contain[data-type=' + itemValue + ']', target).appendTo($('.metro_input_show_contains', target));
        adjustMetroInputContain();
    }

    function loadPhoneTypes() {
        var url = "/Home/GetPhoneTypes";
        $.ajax({
            url: url,         //请求链接 
            dataType: "json",
            success: function (result) {
                $('#metroInputDropdownSelectTemplate').tmpl(result).appendTo($('.metro_input_dropdownselect ul', '.Phone'));
                $('#phoneInputContainTemplate').tmpl(result).appendTo($('.metro_input_hide_contains', '.Phone'));

                initDropdown('.Phone');
                showDropdownItem('商務', '.Phone');
                showDropdownItem('住宅', '.Phone');
                showDropdownItem('商務傳真', '.Phone');
                showDropdownItem('移動電話', '.Phone');

                if (!isNew) {
                    var $phoneList = $('item', $($('#phoneList').html()));
                    $phoneList.each(function () {
                        $this = $(this);
                        $('.phone[name=' + $this.attr('type') + ']', '.Phone').val($this.attr('val'));
                        $('.phoneID[name=' + $this.attr('type') + ']', '.Phone').val($this.attr('id'));
                    });
                }

                loadedPhone = false;
                checkDataLoading();
            }
        });
    }
    function loadEMailTypes() {
        var url = "/Home/GetEMailTypes";
        $.ajax({
            url: url,         //请求链接 
            dataType: "json",
            success: function (result) {
                $('#metroInputDropdownSelectTemplate').tmpl(result).appendTo($('.metro_input_dropdownselect ul', '.EMail'));
                $('#emailInputContainTemplate').tmpl(result).appendTo($('.metro_input_hide_contains', '.EMail'));

                initDropdown('.EMail');
                showDropdownItem('電子郵件', '.EMail');

                if (!isNew) {
                    var $emailList = $('item', $($('#emailList').html()));
                    $emailList.each(function () {
                        $this = $(this);
                        $('.email[name=' + $this.attr('type') + ']', '.EMail').val($this.attr('val'));
                        $('.emailID[name=' + $this.attr('type') + ']', '.EMail').val($this.attr('id'));
                    });
                }

                loadedEmail = false;
                checkDataLoading();
            }
        });
    }
    function loadAddressTypes() {
        var url = "/Home/GetAddressTypes";
        $.ajax({
            url: url,         //请求链接 
            dataType: "json",
            success: function (result) {
                $('#metroInputDropdownSelectTemplate').tmpl(result).appendTo($('.metro_input_dropdownselect ul', '.Address'));
                $('#addressInputContainTemplate').tmpl(result).appendTo($('.metro_input_hide_contains', '.Address'));

                initDropdown('.Address');
                showDropdownItem('商務', '.Address');

                if (!isNew) {
                    var $addressList = $('item', $($('#addressList').html()));
                    $addressList.each(function () {
                        $this = $(this);
                        $('#Zip-' + $this.attr('type'), '.Address').val($this.attr('zip'));
                        $('#Province-' + $this.attr('type'), '.Address').val($this.attr('province'));
                        $('#City-' + $this.attr('type'), '.Address').val($this.attr('city'));
                        $('#Streat-' + $this.attr('type'), '.Address').val($this.attr('streat'));
                        $('#Country-' + $this.attr('type'), '.Address').val($this.attr('country'));
                        $('.addressID[name=' + $this.attr('type') + ']', '.Address').val($this.attr('id'));
                    });
                }

                loadedAddress = false;
                checkDataLoading();
            }
        });
    }
    function adjustMetroInputContain() {
        var maxCaptionWidth = $.fn.calcMaxWidth($('.metro_input_caption'));
        $('.metro_input_caption').each(function () {
            $(this).width(maxCaptionWidth);
        });

        adjustMetroInputContainOod();
    }
    function adjustMetroInputContainOod() {
        var target = '.Phone';
        if ($('.metro_input_show_contains .metro_input_caption:odd', target).length > 0) {
            $('.metro_input_show_contains .metro_input_caption:odd', target).width(100);
        }
    }
    function adjustPartCaption() {
        $('.part_caption').each(function () {
            $('.part_caption_line', $(this)).css({ left: $('.part_caption_text', $(this)).width() + 5 });
            $('.part_caption_line', $(this)).width($(this).width() - $('.part_caption_text', $(this)).width() - 5);
        });

        $('.part_left .part_caption').each(function () {
            $('.part_caption_line', $(this)).width($(this).width() - $('.part_caption_text', $(this)).width() - 30);
        });
    }

    function checkDataLoading() {
        if (loadedAddress && loadedEmail && loadedPhone)
            showLoading();
        else if (!loadedAddress && !loadedEmail && !loadedPhone)
            hideLoading();
    }
</script>
<data id="emailList">
    @if (Model.EMailList != null)
    {
    <list>
        @foreach (var item in Model.EMailList)
        {
        <item id='@item.ID' type="@item.Type" val="@item.EMail1"></item>
        }
    </list>
    }
</data>
<data id="phoneList">
    @if (Model.PhoneList != null)
    {
    <list>
        @foreach (var item in Model.PhoneList)
        {
        <item id='@item.ID' type="@item.Type" val="@item.Phone1"></item>
        }
    </list>
    }
</data>
<data id="addressList">
    @if (Model.AddressList != null)
    {
    <list>
        @foreach (var item in Model.AddressList)
        {
        <item id='@item.ID' type="@item.Type" zip="@item.Zip" province="@item.Province" city="@item.City" streat="@item.Streat" country="@item.Country"></item>
        }
    </list>
    }
</data>
